<template>
    <div>
        <Row type="flex" justify="center" align="middle">
            <Col span="24">
                <Form ref="searchForm" :model="searchData" inline>
                  <Col span="24">
                    <Row>
                      <Form-item prop="swname">
                          <Input type="text" style="width:150px" v-model="searchData.swname" placeholder="联系人">
                          </Input>
                      </Form-item>
                      <Form-item prop="stelno">
                          <Input type="text" style="width:150px" v-model="searchData.stelno" placeholder="联系人电话">
                          </Input>
                      </Form-item>
                      <Form-item prop="swname">
                          <Input type="text" style="width:150px" v-model="searchData.rwname" placeholder="被联系人">
                          </Input>
                      </Form-item>
                      <Form-item prop="stelno">
                          <Input type="text" style="width:150px" v-model="searchData.rtelno" placeholder="被联系人电话">
                          </Input>
                      </Form-item>
                      <Form-item prop="code">
                          <Input type="text" style="width:150px" v-model="searchData.code" placeholder="招工编码">
                          </Input>
                      </Form-item>
                      <Form-item prop="worktype">
                          <Input type="text" style="width:150px" v-model="searchData.worktype" placeholder="招工工种">
                          </Input>
                      </Form-item>
                      <Form-item prop="calltime">
                          <Date-picker type="date" :options="options3" v-model="searchData.callday" placeholder="选择日期" style="width: 200px"></Date-picker>
                      </Form-item>
                      <!--<Form-item prop="calltime">
                          <Date-picker v-model="searchData.calltime" format="yyyy-MM-dd HH:mm:ss" type="datetimerange" placement="bottom-end"
                          placeholder="拨打电话时间段" style="width: 400px" @on-change="calltimeChange"></Date-picker>
                      </Form-item>-->
                      <Form-item>
                        <Button type="primary" @click="search" :loading="loading">
                          <span v-if="!loading">搜索</span>
                          <span v-else>加载中</span>
                        </Button>
                      </Form-item>
                    </Row>
                  </Col>
                </Form>
            </Col>
            <Col span="24">
                <Table :columns="column" :data="list"></Table>
                <Page :total="pagedata.total" size="small" :current="pagedata.current" :page-size="pagedata.pageSize" :page-size-opts="pagedata.pageSizeOpts"
                    @on-change="pageChange" @on-page-size-change="sizeChange"
                show-elevator show-sizer show-total></Page>
            </Col>
        </Row>
        <Modal v-if="detailinfo" v-model="showdetail" title="详细" width="1000">
          <Row>
            <Col span="24">
              <Card >
                <p slot="title">
                  用户信息
                </p>
                  <Row>

                    <Col span="8">
                        <p>创建人：{{detailinfo.coninfo.wname}}</p>
                        <p>性别：{{detailinfo.coninfo.gender}}</p>

                    </Col>
                    <Col span="8">
                        <p>已实名：{{detailinfo.coninfo.is_realauth?'否':'是'}}</p>
                        <p>年龄：{{detailinfo.coninfo.wage}}</p>
                    </Col>
                    <Col span="8">
                        <p>电话：{{detailinfo.coninfo.telno}}</p>
                        <p>代发人：{{detailinfo.release_user}}</p>
                    </Col>
                  </Row>
              </Card>
            </Col>
            <Col span="24">
                <Card >
                  <p slot="title">
                    招工信息 编码：{{detailinfo.code}}
                  </p>
                    <Row>
                      <Col span="6">
                        <p>招工状态：{{ $t('isactive_'+detailinfo.isactive) }}</p>
                      </Col>
                      <Col span="6">
                        <p>审核状态：{{ $t('ispass_'+detailinfo.ispass) }}</p>
                      </Col>
                      <Col span="6">
                        <p>日工资：{{detailinfo.daysalary}}</p>
                      </Col>
                      <Col span="6">
                        <p>工种：{{detailinfo.worktype}}</p>
                      </Col>
                      <Col span="12">
                       <p>创建时间：{{detailinfo.createdate}}</p>
                      </Col>
                      <Col span="12">
                       <p>关闭时间：{{detailinfo.unactivetime}}</p>
                      </Col>
                      <Col span="24">
                        <p>地址：{{detailinfo.city}}{{detailinfo.disc}}{{detailinfo.town}}{{detailinfo.address}}</p>
                      </Col>
                      <Col span="24">
                        <p>简介：{{detailinfo.disstr}}</p>
                      </Col>
                      <Col span="24">
                        <p>详细：{{detailinfo.info}}</p>
                      </Col>
                    </Row>
                </Card>
            </Col>
        </Row>
        </Modal>
    </div>
</template>
<script>
import { getinventinfo } from '@/api/work'
import { getconnectlist } from '@/api/other'
export default {
  name: 'connectionlist',
  data () {
    var self = this
    return {
      loading: false,
      options3: {
        disabledDate (date) {
          const time = 60 * 60 * 1000 * 12 * 63
          const lastDay = Date.now() - time
          const lastDay2 = date.valueOf() - time
          // console.log(date, date.valueOf(), Date.now(), date.valueOf() - Date.now(), lastDay, lastDay2, lastDay2 - lastDay)
          return date && (date.valueOf() > Date.now() || date.valueOf() < lastDay)
        }
      },
      showdetail: false,
      detailinfo: false,
      list: [],
      column: [
        {
          title: 'ID',
          key: 'id',
          width: 80
        },
        {
          title: '联系人',
          key: 'swname',
          render: function (h, params) {
            const swname = params.row.swname ? params.row.swname : ''
            const stelno = params.row.stelno ? params.row.stelno : ''
            const html = '<p>用户名：' + swname + '</p><p>电话：' + stelno + '</p>'
            var div = h('div', {
              domProps: {
                innerHTML: html
              }
            })
            return div
          }
        },
        {
          title: '被联系人',
          key: 'rwname',
          render: function (h, params) {
            const rwname = params.row.rwname ? params.row.rwname : ''
            const rtelno = params.row.rtelno ? params.row.rtelno : ''
            const html = '<p>用户名：' + rwname + '</p><p>电话：' + rtelno + '</p>'
            var div = h('div', {
              domProps: {
                innerHTML: html
              }
            })
            return div
          }
        },
        {
          title: '招工编码',
          key: 'code',
          render: function (h, params) {
            let text = ''
            if (!params.row.code) {
              text = params.row.iid
            } else {
              text = params.row.code
            }
            var div = h('a', {
              attrs: {
                href: 'javascript:;'
              },
              on: {
                click: () => {
                  self.showdetailinfo(params.row.iid)
                }
              }
            }, text)
            return div
          }
        },
        {
          title: '工种',
          key: 'worktype',
          width: 80
        },
        {
          title: '联系时间',
          key: 'calltime'
        }
      ],
      searchData: {
        swname: '',
        stelno: '',
        rwname: '',
        rtelno: '',
        code: '',
        worktype: '',
        calltime: [],
        callday: ''
      },
      pagedata: {
        total: 10,
        current: 1,
        pageSize: 10,
        pageSizeOpts: [10, 50, 100]
      }
    }
  },
  methods: {
    search () {
      this.pagedata.current = 1
      this.getList()
    },
    getList () {
      this.loading = true
      this.searchData.page = this.pagedata.current
      this.searchData.size = this.pagedata.pageSize
      getconnectlist(this.searchData).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
          this.list = []
          this.pagedata.total = 0
          this.pagedata.current = 1
        } else {
          const usedata = data.data
          this.pagedata.total = usedata.count
          this.list = usedata.list
        }
        this.loading = false
      })
    },
    pageChange (current) {
      this.pagedata.current = current
      this.getList()
    },
    sizeChange (pageSize) {
      this.pagedata.pageSize = pageSize
      this.pagedata.current = 1
      this.getList()
    },
    showdetailinfo (id) {
      getinventinfo(id).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
        } else {
          const usedata = data.data
          this.detailinfo = usedata
          this.showdetail = true
        }
      })
    },
    calltimeChange (values) {
      this.searchData.calltime = values
    }
  },
  mounted () {
    this.getList()
  }
}
</script>
